<template>
	<view>
		<cu-custom rightAll>
			明细查询
		</cu-custom>
		<view
			class="tabs rela u-flex u-flex-around u-flex-items-center bgcolor-ffffff">
			<view class="tabs-item  u-flex u-flex-center u-flex-items-center"
				v-for="(item,index) in tabs" :key="index"
				:class="{active: index == tabIndex}">
				{{item.name}}
			</view>
			<view class="tabs-line abso" :style="{left:lineLeft}"></view>
		</view>
		<view class="screen-box">
			<view class="screen margin-top padding-tb-sm bgcolor-ffffff
			 u-flex u-flex-items-center u-flex-between padding-left padding-right-xs">
				<view class="date-text u-flex u-flex-items-center">
					<text>
						{{dateStart | date('yyyy.mm.dd')}}-{{dateNow | date('yyyy.mm.dd')}}
					</text>
					<image class="arrow-down" src="/static/detail-list/theme-arrow-down.png" mode="aspectFit"></image>
				</view>
				<view class="card u-flex u-flex-items-center">
					<text>
						绿卡通{{_userinfo.cardNumber.substr(-4,4)}}
					</text>
					<image class="arrow-down" src="/static/detail-list/theme-arrow-down.png" mode="aspectFit"></image>
				</view>
				<view class="screen-btn u-flex u-flex-items-center">
					<text>
						筛选
					</text>
					<image class="screen-img" src="/static/detail-list/screen.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="date padding-sm bgcolor-ffffff
			 u-flex u-flex-items-center">
				<view class="date-item" :class="{active: index == dateCur}"
					v-for="(item,index) in dateTabs" :key="index"
					@click="dateCur = index">
					{{item.title}}
				</view>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" :height="'0px'"
			:up="upOption" @up="upCallback">
			<view class="list-box u-flex-y" v-for="(item,key) in dataList"
				:key="key">
				<view class="title font-weight-500 padding-left padding-tb-sm">{{key}}</view>
				<view class="list-item padding u-flex u-flex-between u-flex-items-center bgcolor-ffffff"
					v-for="(cItem,cIndex) in item" :key="cItem.id">
					<view class="left u-flex-y" @click="toReceipt(cItem)">
						<text class="title">{{cItem.abstractInfo ||''}}</text>
						<text class="desc">{{cItem.timeStamp | date('hh:MM:ss')}}</text>
					</view>
					<view class="right u-flex u-flex-items-center"
					 @click="listClick(cItem)">
						<view class="right-left u-flex-y u-flex-items-end">
							<view class="banlance u-flex u-flex-items-center">
								<text>
									{{TYPEENUM[cItem.type].symbol}}￥
								</text>
								{{priceFormat(cItem.amountMoney)}}
							</view>
							<text class="desc">余额:￥{{priceFormat(cItem.currentBalance)}}</text>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<view class="tips u-flex-y padding-lr padding-bottom-sm">
			<view class="tips__title">
				温馨提示：
			</view>
			<text v-for="(item,index) in tips" :key="index" :class="{'important': item.isImportant}">
				{{index+1}}. {{item.text}}
			</text>
		</view>
	</view>
</template>

<script>
	import NavbarMixins from '@/common/mixins/navbar-mixins.js';
	import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue';
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	import { TYPEENUM } from '@/common/data/Enum.js';

	let mescrollH = 0;

	export default {
		mixins: [MescrollMixin],
		components: {
			MescrollBody,
		},
		data() {
			return {
				tabs: [
				{
					name: '交易明细',
				}, {
					name: '延时转账明细',
				}],
				tabIndex: 0,
				dateTabs: [
					{
						title: '七天',
						time: 604800000
					},
					{
						title: '一个月',
						time: 2678399000
					},

					{
						title: '三个月',
						time: 7776000000
					}
				],
				dateCur: 0,
				lineLeft: '',
				dateNow: '',
				dateStart: '',
				mescrollH,
				downOption: {
					use: false
				},
				upOption: {
					// use: false,
					auto: false, // 不自动加载
					page: {
						size: 10,
						num: 0,
					},
					toTop: {
						src: '',
					},
					empty: {
						use: false
					},
					noMoreSize: 0,
					showSkeleton: false,
					textLoading: '', // 加载中的提示文本
					textNoMore: '没有更多数据', // 没有更多数据的提示文本
				},
				dataList: {},
				sourceList: [],
				TYPEENUM,
				tips: [
					{
						text: '您可以查询最近12个月内的交易记录，单次查询时间间隔不超过3个月。',
						isImportant: false,
					},

					{
						text: '已默认为你展示最近7天的账户交易明细。',
						isImportant: false,
					},
				]
			};
		},
		computed: {
			dateCurTime() {
				return this.dateTabs[this.dateCur].time;
			}
		},
		watch: {
			dateCur(val) {
				this.getBankFlowingwaterList();
			}
		},
		onLoad() {
			// this.initDate();
			// this.getBankFlowingwaterInfo();
			this.getBankFlowingwaterList();
		},
		onShow() {
			if (this.$store.state.params.isEditBankFlowInfo) {
				// this.getBankFlowingwaterInfo();
				this.getBankFlowingwaterList();
				// this.$nextTick(() => {
				// 	// this.getBankFlowingwaterList();
				// 	// this.mescroll && this.mescroll.resetUpScroll(false);
				// })
				this.$store.dispatch('set_params', '');
			}
		},
		async mounted() {
			this.$u.getRect('.tabs-item').then(rect => {
				const { left, width } = rect;
				this.lineLeft = left + width / 2 - uni.upx2px(40) + 'px';
			});
			if (!mescrollH) {
				const tabRect = await this.$u.getRect('.tabs');
				const screenRect = await this.$u.getRect('.screen-box');
				mescrollH = this.$windowHeight - (tabRect.height + screenRect.height + uni.upx2px(30)) - this
					.$NavBarHeight - this.$StatusBarHeight;
				// console.debug(topRect.height + filterRect.height + dateRect.height);
				this.mescrollH = mescrollH;
			}
		},
		methods: {
			toReceipt(item){
				this.$store.dispatch('set_params', {id: item.id});
				this.$Router.push({
					name: 'e-receipt'
				});
			},
			listClick(item) {
				// console.debug(id);
				this.$store.dispatch('set_params', item);
				this.$Router.push({
					name: 'detail-info'
				});
			},
			upCallback(page) {
				console.debug('上拉加载');
				new Promise((resolve, reject) => {
					setTimeout(() => {
						try {
							const list = [];
							for (let i = (page.num - 1) * page.size, l = page.num * page.size; i <
								l; i++) {
								if (i == this.sourceList.length) break;
								list.push(this.sourceList[i]);
							}
							resolve(list);
						} catch (e) {
							//TODO handle the exception
							reject(e);
						}
					}, 300);
				}).then(res => {
					const toDayTime = this.dateNow + 86399000;
					const yesterDayTime = this.dateNow - 86399000;
					if (page.num == 1) {
						this.dataList = {};
					}
					res.forEach(item => {
						const key = this.getFormatDate(item.timeStamp, toDayTime, yesterDayTime);
						this.dataList[key] = this.dataList[key] || [];
						this.dataList[key].push(item);
					});
					this.$forceUpdate();
					console.debug(this.dataList);
					this.mescroll.endSuccess(res.length, page.size == res.length);
				}).catch(err => {
					this.mescroll.endErr();
					console.debug('err upCallback', err);
				}).finally(() => this.$Tips.loaded());
			},
			initDate() {
				this.dateNow = new Date(new Date().toDateString()).getTime();
				this.dateStart = this.dateNow - this.dateCurTime;
				console.log(this.dateStart, this.dateNow);
			},
			getFormatDate(time, toDayTime, yesterDayTime) {
				if (!time) return time;
				let formatTime = '';
				if (time >= this.dateNow && time <= toDayTime) {
					formatTime = '今天';
				} else if (time >= yesterDayTime && time < this.dateNow) {
					formatTime = '昨天';
				} else {
					formatTime =
						`${this.$u.timeFormat(time, 'yyyy年mm月dd日')}`;
				}
				return formatTime;
			},
			getBankFlowingwaterList() {
				this.$Tips.loading('加载中...');
				this.initDate();
				this.$api.getBankFlowingwaterList({
					cardId: this._userinfo.id,
					startTime: this.$u.date(this.dateStart, 'yyyy-mm-dd hh:MM:ss'),
					endTime: this.$u.date(this.dateNow + 86399000, 'yyyy-mm-dd hh:MM:ss')
				}).then(res => {
					this.sourceList = res.data.data;
					this.$nextTick(() => {
						this.mescroll.resetUpScroll(false);
					});
				}).catch(err => {
					console.debug('getBankFlowingwaterList err', err);
				});
			},
			getBankFlowingwaterInfo() {
				this.$api.getBankFlowingwaterInfo({
					cardId: this._userinfo.id,
				}).then(res => {
					this.detailInfos = res.data.data;
				}).catch(err => {
					console.debug('getBankFlowingwaterInfo err', err);
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	.tabs {
		height: 120rpx;

		&-item {
			transform: scale(1);
			font-size: 32rpx;
			flex-shrink: 0;
		}

		.active {
			font-weight: bold;
			transform: scale(1.05);
		}

		&-line {
			width: 80rpx;
			height: 8rpx;
			@include themeBgColor;
			bottom: 0;
		}
	}

	.list-box {
		.title {
			font-size: 30rpx;
		}

		.list-item {
			border-bottom: 2rpx solid rgb(218, 218, 218);

			.title,
			.banlance {
				font-size: 32rpx;
				margin-bottom: 8rpx;
			}

			.desc {
				color: rgb(122, 122, 122);
				font-size: 28rpx;
			}
		}
	}

	.screen,
	.date {
		border-bottom: 2rpx solid rgb(229, 229, 229);
	}

	.screen {
		font-size: 28rpx;

		.arrow-down {
			width: 40rpx;
			height: 40rpx;
		}

		.screen-img {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.date {
		&-item {
			border: 2rpx solid $color-theme;
			border-radius: 24rpx;
			width: 120rpx;
			text-align: center;
			padding: 8rpx 0;
			margin-right: 16rpx;
			color: $color-theme;

			&.active {
				background-color: rgb(81, 196, 15);
				color: #fff;
				border: 2rpx solid rgb(47, 156, 15);
			}
		}
	}

	.tips {
		line-height: 1.5;
		color: rgb(119, 119, 119);
		font-size: 30rpx;
		text-align: justify;
		word-break: break-all;

		&__title {
			font-size: 36rpx;
		}

		text {
			text-indent: 60rpx;
		}
	}
</style>
